Artyku│ z kursu HTML i CSS

Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami

autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [t│a] • [synteza] • [druk]

XHTML 1.0 - nastΩpca jΩzyka HTML

JΩzyk HTML od wersji 4.01 nie jest ju┐ dalej rozwijany - zast▒pi│ go XHTML, obecnie w wersji 1.1 (jednak tekst dotyczy │atwiejszej do opisania wersji XHTML 1.0). Nazwa brzmi mo┐e gro╝nie, jednak jest on niemal identyczny jak HTML 4.01, kt≤rego dobrze znasz z mojego kursu. Kilka nowych regu│ bardzo │atwo mo┐na opanowaµ i ju┐ po chwili bΩdziesz w stanie pisaµ strony zgodne z jΩzykiem XHTML. Po co wiΩc powsta│ nowy jΩzyk? Dla wygody. HTML zosta│ znormalizowany aby m≤g│ byµ zgodny z jΩzykiem XML, kt≤ry okre╢la zasady tworzenia innych jΩzyk≤w u┐ywanych w elektronicznych publikacjach.

Pisz▒c nowe strony dobrze jest stosowaµ siΩ do zasad okre╢lonych w XHTMLu, jednak je┐eli chcesz nadal u┐ywaµ tylko jΩzyka HTML 4.01 nic nie stoi na przeszkodzie aby zapomnieµ o tym tek╢cie zaraz po jego przeczytaniu. Nowe przegl▒darki stron WWW bΩd▒ ca│y czas obs│ugiwaµ HTML na r≤wni z XHTMLem - przynajmniej w najbli┐szej przysz│o╢ci. Miliony dokument≤w na ca│ym ╢wiecie zosta│y napisane w jΩzyku HTML - nikt nie bΩdzie ich nagle przerabia│ do XHTMLa, bo by│aby to czynno╢µ pozbawiona sensu. Warto jednak znaµ r≤┐nice pomiΩdzy jΩzykami.

Deklaracja dokumentu

Ka┐da strona w jΩzyku XHTML musi zaczynaµ siΩ od okre╢lenia wersji jΩzyka XML (obecnie jest to wersja 1.0) i sposobu kodowania znak≤w. Dla jΩzyka polskiego bΩdzie to iso-8859-2:

<?xml version="1.0" encoding="iso-8859-2"?>

Zwr≤µ uwagΩ na znak zapytania (nie uko╢nik), "zamykaj▒cy" wersjΩ XML. NastΩpnie trzeba zadeklarowaµ odpowiedni▒ definicjΩ DTD, czyli okre╢liµ regu│y jΩzyka. Musimy wybraµ jedn▒ z trzech wersji.

1. Strict: strona bΩdzie napisana zgodnie z deklarowanym standardem i nie dopuszcza innych element≤w. Trudno jest napisaµ tak▒ stronΩ, ale w│a╢nie do takiego idea│u d▒┐ymy...

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">

2. Transitional: strona bΩdzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne s▒ te┐ inne elementy, np. ze starego jΩzyka HTML. W wiΩkszo╢ci wypadk≤w dobrze jest u┐yµ tej w│a╢nie definicji...

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">

3. Frames: strona bΩdzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne s▒ te┐ inne elementy, np. ze starego jΩzyka HTML. Ten wariant stosuje siΩ gdy witryna zawiera ramki.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "DTD/xhtml1-frameset.dtd">

Powy┐sze polecenia przypominaj▒ element !DOCTYPE z jΩzyka HTML.

Trzeba r≤wnie┐ okre╢liµ tzw. przestrze± nazw. W jΩzyku XML sami decydujemy jak▒ rolΩ pe│ni▒ wszystkie polecenia i ich atrybuty. Ka┐dy element jΩzyka HTML mo┐e mieµ wiele znacze±, wiΩc trzeba poinformowaµ przegl▒darkΩ co ma zrobiµ gdy natrafi np. na element img lub jak zareagowaµ na atrybut src. W tym celu definiuje siΩ przestrze± nazw, gdzie okre╢lone s▒ sposoby u┐ycia poszczeg≤lnych polece±. Odpowiedzialny jest za to atrybut xmlns (czyli XML namespace). Dla jΩzyka XHTML bΩdzie to nastΩpuj▒cy fragment kodu:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Szablon strony

Znaj▒c ju┐ podstawowe elementy mo┐emy utworzyµ szablon strony. Nie r≤┐ni siΩ on bardzo od szablonu w jΩzyku HTML.

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tytu│ strony</title>
</head>
<body>
   <p>Przyk│adowy akapit</p>
</body>
</html>

Czas na szczeg≤│y...

1. Zagnie┐d┐anie. W jΩzyku XHTML istotna jest kolejno╢µ otwierania i zamykania tag≤w. W HTML r≤wnie┐ powinni╢my o tym pamiΩtaµ, ale tutaj ma to kluczowe znaczenie. Nie mo┐na napisaµ:

To <b>nie jest poprawna <i>kolejno╢µ</b> element≤w</i> - s▒ skrzy┐owane!

Trzeba te┐ pamiΩtaµ, aby element A nie zawiera│ innych element≤w A. PRE nie mo┐e zawieraµ element≤w IMG, BIG, SUB, SUP, SMALL i OBJECT. BUTTON nie mo┐e zawieraµ element≤w INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET, IFRAME i ISINDEX. LABEL nie mo┐e zawieraµ innych element≤w LABEL, a FORM nie mo┐e zawieraµ innych element≤w FORM.

2. Zamykanie znacznik≤w. Ka┐dy znacznik musi byµ zamkniΩty, nawet je┐eli nie ma znacznik≤w zamykaj▒cych. Brzmi to mo┐e dziwnie, bo jak zamkn▒µ element <br>? Jest na to spos≤b - wystarczy u┐yµ go w postaci <br />, podobnie jak np. <img src="zdjecie.jpg" />. PamiΩtaj o spacji przed uko╢nikiem, bo niekt≤re wsp≤│czesne przegl▒darki mog▒ mieµ problem gdy odstΩpu nie bΩdzie.

3. Wielko╢µ liter. Wszystkie elementy i atrybuty musz▒ byµ zapisywane z ma│ych liter. Wielko╢µ znak≤w w XHTML ma du┐e znaczenie, wiΩc co innego znaczy <B> (to nie jest pogrubienie), a co innego <b> (to jest pogrubienie). W ca│ym kursie stosujΩ du┐e litery dla atrybut≤w aby kurs by│ bardziej czytelny. W XHTMLu wiΩkszo╢µ polece± pisana jest z u┐yciem ma│ych liter.

4. Cudzys│≤w. Wszystkie atrybuty musz▒ byµ zapisane w cudzys│owach. B│Ωdem jest napisanie <table align=left width=100>. Prawid│owo powinno byµ: <table align="left" width="100">.

5. Atrybuty puste. W HTML stosowane s▒ atrybuty puste (logiczne), np. <hr noshade>. W XHTMLu musz▒ mieµ przypisane warto╢ci. Poniewa┐ nie maj▒ warto╢ci, przypisuje siΩ im w│asn▒ nazwΩ. Po zamianie na XHTML przyk│ad wygl▒da tak: <hr noshade="noshade" />.

6. Znaki specjalne. Trzeba uwa┐aµ przy stosowaniu znak≤w < i & w skryptach i deklaracjach CSS. Najlepiej zastΩpowaµ je poprzez < i &.

7. Skrypty. Ka┐dy skrypt powinien byµ "otoczony" przez nastΩpuj▒c▒ strukturΩ:

<SCRIPT language="javascript">
<![CDATA[
 dopiero tutaj umie╢µ skrypt
]]>
</script>

8. Atrybut ID Zamiast atrybutu name stosuj id. Atrybut name nie jest zalecany i nie powinno siΩ go u┐ywaµ w XHTML. Je┐eli u┐ywasz atrybutu name, uzupe│nij element o atrybut id o takiej samej warto╢ci.

Ju┐ znasz XHTML...

Jak widzisz, XHTML nie jest zbyt trudny, choµ k│opotliwy w u┐yciu. To w zasadzie stary, dobrze znany HTML wzbogacony o pewne regu│y, kt≤re dbaj▒ o zgodno╢µ zapisu z jΩzykiem XML.

• • •
Zobacz porady, skrypty, artyku│y i gotowe rozwi▒zania dla w│a╢cicieli stron WWW!